<template>
  <div class="common-layout">
    <el-container>
      <el-header class="navbar">
        <div class="navbar-wrapper">
          <div class="header-container">
            <div class="web-name">视频解析系统</div>
          </div>
        </div>
      </el-header>
      <el-main class="page-content">
        <div class="in-input">
          <el-form
            ref="formRef"
            style="max-width: 658px"
            :model="ajaxForm"
            label-width="auto"
            class="demo-ruleForm"
            :rules="rules"
          >
            <el-form-item label="" prop="url" v-cloak>
              <el-input
                v-model="ajaxForm.url"
                style="max-width: 600px"
                placeholder="请输入Tiktok地址"
                class="input-with-select"
                :disabled="ajaxForm.isLoading"
                clearable
              >
                <template #append>
                  <el-button
                    type="primary"
                    style="width: 108px"
                    @click="submitForm(formRef)"
                    :loading="ajaxForm.isLoading"
                    >提交</el-button
                  >
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="ayns-list">
          <el-text
            class="mx-1"
            type="info"
            v-if="!ajaxForm.isLoading && action.list"
            >暂无内容</el-text
          >
          <el-collapse accordion @change="setCollapse">
            <el-collapse-item
              :name="index"
              v-for="(item, index) in action.list"
              :key="item.id"
            >
              <template #title>
                <div class="c-title">
                  {{ getTitle(item.uri) }}
                  <!-- <el-popover
                    title="备注"
                    :width="200"
                    trigger="click"
                    :visible="item.noteVisible"
                    placement="top"
                  >
                    <template #reference>
                      <el-icon
                        :size="15"
                        @click="
                          (e) => {
                            showNotesProp(e, item);
                          }
                        "
                      >
                        <Edit />
                      </el-icon>
                    </template>
                    <input v-model="action.editNotes" />
                    <el-button @click="setNotes(item)">确定</el-button>
                    <el-button @click="clearNotes(item)">取消</el-button>
                  </el-popover> -->
                </div>

                <el-tag effect="dark" :type="tagType[item.status].type">
                  {{ tagType[item.status].title }}
                </el-tag>
              </template>
              <div v-if="item.status == 'END'">{{ item.content }}</div>
              <div v-else-if="item.status == 'ERROR'">
                <el-text class="mx-1" type="danger">{{ item.errmsg }}</el-text>
              </div>
              <div v-else>
                {{ tagType[item.status].title }}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      v-model="action.loginDialogVisible"
      title="Login"
      width="500"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :inline="true"
        ref="loginFormRef"
        :model="action.loginForm"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item
          label="用户名"
          prop="userName"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <el-input
            v-model="action.loginForm.userName"
            placeholder="请输入用户名"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <el-input
            v-model="action.loginForm.password"
            placeholder="请输入密码"
            type="password"
            clearable
          />
        </el-form-item>
        <p>
          <el-text
            class="mx-1"
            type="danger"
            v-show="action.errmsg && action.errmsg.length > 2"
            >{{ action.errmsg }}</el-text
          >
        </p>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="login(loginFormRef)">
            登录
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import {
  getAnalysisList,
  getAnalysisItem,
  addAnalysis,
} from "../api/videoAnalysis";
import { Login } from "../api/login";
import { ElMessage } from "element-plus";

let timeout,
  times = 0;

const formRef = ref();

const loginFormRef = ref();

const ajaxForm = reactive({
  url: "",
  isLoading: false,
});

const rules = {
  url: [
    { required: true, message: "视频地址不能为空" },
    {
      validator: (rule, value, callback) => {
        if (!value.startsWith("https://www.tiktok.com")) {
          callback(new Error("请输入正确的TikTok地址"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const submitForm = (formRef) => {
  formRef.validate((valid) => {
    if (valid) {
      ajaxForm.isLoading = true;
      addAnalysis(ajaxForm.url).then(() => {
        getList();
        ajaxForm.isLoading = false;
        formRef.resetFields();
        ElMessage({
          message: "提交成功",
          type: "success",
        });
      });
    }
  });
};

const getTitle = (url) => {
  return url?.split("?")[0];
};

const tagType = {
  START: { type: "info", title: "排队中" },
  DOWNLOADING: { type: "primary", title: "下载中" },
  DOWNLOAD: { type: "primary", title: "数据初始化" },
  EXTRACT: { type: "warning", title: "AI解析中" },
  END: { type: "success", title: "完成" },
  ERROR: { type: "danger", title: "Error" },
};
const action = reactive({
  list: [
    // {
    //   id: 1,
    //   url: "https://www.tiktok.com/@theseanbenedict/video/7418875160331046165?q=skintific&t=1742454427100",
    //   status: "START",
    //   content: null,
    //   errmsg: null,
    //   createTime: "2025-11-11 03:03:03",
    //   workTime: "",
    // },
    // {
    //   id: 2,
    //   url: "https://www.tiktok.com/@theseanbenedict/video/7418875160331046165?q=skintific&t=1742454427100",
    //   status: "DOWNLOADING",
    //   content: null,
    //   errmsg: null,
    //   createTime: "2025-11-11 03:03:03",
    //   workTime: "",
    // },
    // {
    //   id: 3,
    //   url: "https://www.tiktok.com/@theseanbenedict/video/7418875160331046165?q=skintific&t=1742454427100",
    //   status: "EXTRACT",
    //   content: null,
    //   errmsg: null,
    //   createTime: "2025-11-11 03:03:03",
    //   workTime: "",
    // },
    // {
    //   id: 4,
    //   url: "https://www.tiktok.com/@theseanbenedict/video/7418875160331046165?q=skintific&t=1742454427100",
    //   status: "END",
    //   content: null,
    //   errmsg: null,
    //   createTime: "2025-11-11 03:03:03",
    //   workTime: "",
    // },
    // {
    //   id: 5,
    //   url: "https://www.tiktok.com/@theseanbenedict/video/7418875160331046165?q=skintific&t=1742454427100",
    //   status: "ERROR",
    //   content: null,
    //   errmsg: null,
    //   createTime: "2025-11-11 03:03:03",
    //   workTime: "",
    // },
  ],
  editNotes: "",
  loginDialogVisible: false,
  loginForm: {
    userName: "",
    password: "",
  },
  errmsg: "",
});
const showNotesProp = (e, item) => {
  e.stopPropagation();
  action.list.forEach((__i) => {
    __i.noteVisible = false;
  });
  item.noteVisible = true;

  action.editNotes = item.notes || "";
};
const setNotes = (item) => {
  item.notes = action.editNotes;
  item.noteVisible = false;
};

const setCollapse = (e) => {
  const item = action.list[e];
  if (item && !item.loading && item.status == "END") {
    item.loading = true;
    getAnalysisItem(item.id)
      .then((json) => {
        const { data } = json;
        item.content = data.content;
        item.videoImages = data.videoImages || [];
      })
      .catch((e) => {
        const { code } = e;
        if (code == 401) {
          showLoginDalog();
        }
      });
  }
};

const showLoginDalog = () => {
  action.errmsg = "";
  action.loginDialogVisible = true;
};

const clearNotes = (item) => {
  action.value.editNotes = "";
  item.noteVisible = false;
};

const getList = (pageNum = 1, pageSize = 50) => {
  ajaxForm.isLoading = true;
  if (timeout) {
    clearTimeout(timeout);
  }
  getAnalysisList({ pageNum, pageSize })
    .then((json) => {
      console.info("json", json);
      ajaxForm.isLoading = false;
      const { rows } = json;
      if (pageNum == 1) {
        action.list = rows;
      } else {
        action.list.push(rows);
      }
    })
    .catch((e) => {
      const { code } = e;
      if (code == 401) {
        showLoginDalog();
      }
    });
};
if (process.client) {
  getList();
}

const login = (loginFormRef) => {
  loginFormRef.validate((valid) => {
    if (valid) {
      Login(action.loginForm.userName, action.loginForm.password)
        .then(() => {
          getList();
          action.loginDialogVisible = false;
        })
        .catch((e) => {
          console.info(e);
          action.errmsg = e.msg || "操作失败";
        });
    }
  });
};
</script>
<style lang="scss">
.navbar {
  top: 0;
  left: 0;
  position: relative;
  z-index: 12;
}

@media screen and (min-width: 960px) {
  .navbar {
    position: sticky;
    width: 100%;
  }
}

.navbar-wrapper {
  position: relative;
  border-bottom: 1px solid var(--border-color);
  height: 55px;
  padding: 0 12px 0 24px;
  background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
  -webkit-backdrop-filter: saturate(50%) blur(4px);
  top: 0;

  .header-container {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

    .web-name {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
      line-height: 55px;
    }
  }
}

@media screen and (min-width: 1680px) {
  .navbar-wrapper {
    padding: 0 48px;
  }
}

@media screen and (min-width: 1280px) {
  .navbar-wrapper {
    padding: 0 32px;
  }
}
@media screen and (min-width: 768px) {
  .navbar-wrapper {
    padding: 0 12px 0 32px;
  }
}

.page-content {
  outline: none;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .in-input {
    width: 546px;
  }
  .ayns-list {
  }
  .el-input__wrapper {
    box-shadow: none;
    border: 2px solid #c4c7ce;
    border-right-color: #fff;
  }

  .el-form-item.is-error .el-input__wrapper {
    box-shadow: none;
    border: 2px solid red;
    border-right-color: #fff;
    line-height: 44px;
  }
  .el-input {
    height: 44px;
  }

  .el-input-group__append button.el-button {
    width: 108px;
    height: 100%;
    color: #fff;
    background-color: #409eff;
    border-top-left-radius: initial;
    border-bottom-left-radius: initial;
  }
}

.ayns-list {
  width: 90%;

  .c-title {
    padding-right: 10px;
  }
}

/* 你的样式 */
</style>